<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成绩预测</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no" />
    <script src="./js/jquery.min.js"></script>
    <script src="./js/Chart.min.js"></script>
    <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="./css/style2.css" rel="stylesheet" type="text/css" />
    <link href="./css/reset.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container-fluid">
        <div class="details col-xs-12 col-sm-12">
            <p>学员:张海</p>
            <p>性别:男</p>
            <p>课程:专业英语</p>
            <p>提高提示：目前你的专业英语因为你的基础比较差，因此应当在期末考试前抓紧时间背单词和基础语法，如果能在考试前把本学期单词掌握到300个，则期末考试可以达到90分以上。</p>
        </div>
    </div>
<canvas id="myCanvan" width="70vw" height="50vh" ></canvas>
<script>
    $(function(){
        $.ajax({
            type: "get",//请求方式
            url: "aab.json",//地址，就是json文件的请求路径
            dataType: "json",//数据类型可以为 text xml json  script  jsonp
            success: function(result){//返回的参数就是 action里面所有的有get和set方法的参数
                console.log(result);
                var myCans=document.getElementById("myCanvan");
                var myCanvan =new Chart(myCans,{
                    type:"line",
                    data:result,
                    option:{
                        scales:{
                            yAxes:[{
                                ticks:{
                                    beginAtZero:true
                                }
                            }]
                        }

                    }
                })
            }
        });
    });



</script>
</body>
</html>